<template>
  <div class="course-card" @click="handleClick">
    <!-- 课程封面 -->
    <div class="course-cover">
      <img
        :src="course.cover || defaultCover"
        :alt="course.title"
        class="cover-image"
        @error="handleImageError"
      />
      
      <!-- 课程标签 -->
      <div class="course-tags">
        <el-tag
          v-if="course.isFree"
          type="success"
          size="small"
          class="price-tag"
        >
          免费
        </el-tag>
        <el-tag
          v-else
          type="warning"
          size="small"
          class="price-tag"
        >
          ¥{{ course.price }}
        </el-tag>
        
        <el-tag
          v-if="course.isHot"
          type="danger"
          size="small"
          class="hot-tag"
        >
          热门
        </el-tag>
        
        <el-tag
          v-if="course.isNew"
          type="primary"
          size="small"
          class="new-tag"
        >
          新课
        </el-tag>
      </div>
      
      <!-- 收藏按钮 -->
      <div class="favorite-btn" @click.stop="handleFavorite">
        <el-icon
          :class="{ 'is-favorite': course.isFavorite }"
          size="20"
        >
          <Star v-if="course.isFavorite" />
          <StarFilled v-else />
        </el-icon>
      </div>
      
      <!-- 播放按钮 -->
      <div class="play-overlay">
        <div class="play-btn">
          <el-icon size="24"><VideoPlay /></el-icon>
        </div>
      </div>
    </div>
    
    <!-- 课程信息 -->
    <div class="course-info">
      <!-- 课程标题 -->
      <h3 class="course-title" :title="course.title">
        {{ course.title }}
      </h3>
      
      <!-- 课程描述 -->
      <p class="course-description" :title="course.description">
        {{ course.description }}
      </p>
      
      <!-- 讲师信息 -->
      <div class="instructor-info">
        <img
          :src="course.instructor?.avatar || defaultAvatar"
          :alt="course.instructor?.name"
          class="instructor-avatar"
        />
        <span class="instructor-name">{{ course.instructor?.name }}</span>
        <span class="instructor-title">{{ course.instructor?.title }}</span>
      </div>
      
      <!-- 课程统计 -->
      <div class="course-stats">
        <div class="stat-item">
          <el-icon><User /></el-icon>
          <span>{{ formatNumber(course.enrollCount) }}</span>
        </div>
        
        <div class="stat-item">
          <el-icon><Clock /></el-icon>
          <span>{{ course.duration }}小时</span>
        </div>
        
        <div class="stat-item">
          <el-icon><Document /></el-icon>
          <span>{{ course.lessonCount }}课时</span>
        </div>
      </div>
      
      <!-- 评分 -->
      <div class="course-rating">
        <el-rate
          v-model="course.rating"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}分"
          size="small"
        />
        <span class="rating-count">({{ formatNumber(course.ratingCount) }})</span>
      </div>
      
      <!-- 难度等级 -->
      <div class="course-level">
        <el-tag
          :type="getLevelType(course.level)"
          size="small"
          effect="plain"
        >
          {{ getLevelText(course.level) }}
        </el-tag>
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="course-actions">
      <el-button
        v-if="course.isEnrolled"
        type="success"
        size="small"
        class="action-btn"
        @click.stop="handleContinue"
      >
        继续学习
      </el-button>
      
      <el-button
        v-else
        type="primary"
        size="small"
        class="action-btn"
        @click.stop="handleEnroll"
      >
        {{ course.isFree ? '免费学习' : '立即购买' }}
      </el-button>
      
      <el-button
        size="small"
        plain
        class="preview-btn"
        @click.stop="handlePreview"
      >
        试看
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import {
  Star,
  StarFilled,
  VideoPlay,
  User,
  Clock,
  Document
} from '@element-plus/icons-vue'

// Props
const props = defineProps({
  course: {
    type: Object,
    required: true
  }
})

// Emits
const emit = defineEmits(['click', 'favorite', 'enroll', 'continue', 'preview'])

// 默认图片
const defaultCover = ''
const defaultAvatar = ''

// 格式化数字
const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num.toString()
}

// 获取难度等级类型
const getLevelType = (level) => {
  const types = {
    beginner: 'success',
    intermediate: 'warning',
    advanced: 'danger'
  }
  return types[level] || 'info'
}

// 获取难度等级文本
const getLevelText = (level) => {
  const texts = {
    beginner: '入门',
    intermediate: '进阶',
    advanced: '高级'
  }
  return texts[level] || '未知'
}

// 处理图片加载错误
const handleImageError = (event) => {
  event.target.src = defaultCover
}

// 事件处理
const handleClick = () => {
  emit('click', props.course)
}

const handleFavorite = () => {
  emit('favorite', props.course.id, !props.course.isFavorite)
}

const handleEnroll = () => {
  emit('enroll', props.course.id)
}

const handleContinue = () => {
  emit('continue', props.course.id)
}

const handlePreview = () => {
  emit('preview', props.course.id)
}
</script>

<style lang="scss" scoped>
.course-card {
  background: var(--bg-color);
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-light);
  overflow: hidden;
  transition: var(--transition-all);
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    
    .play-overlay {
      opacity: 1;
    }
    
    .cover-image {
      transform: scale(1.05);
    }
  }
}

.course-cover {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: var(--fill-color-light);
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.course-tags {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.price-tag,
.hot-tag,
.new-tag {
  font-weight: 500;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.favorite-btn {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-all);
  
  &:hover {
    background: white;
    transform: scale(1.1);
  }
  
  .el-icon {
    color: var(--text-color-secondary);
    transition: var(--transition-color);
    
    &.is-favorite {
      color: var(--warning-color);
    }
  }
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.play-btn {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  transition: var(--transition-all);
  
  &:hover {
    background: white;
    transform: scale(1.1);
  }
}

.course-info {
  padding: var(--spacing-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.course-title {
  font-size: var(--font-size-medium);
  font-weight: 600;
  color: var(--text-color-primary);
  line-height: 1.4;
  margin: 0;
  @include text-ellipsis-multi(2);
  min-height: 2.8em;
}

.course-description {
  font-size: var(--font-size-small);
  color: var(--text-color-secondary);
  line-height: 1.5;
  margin: 0;
  @include text-ellipsis-multi(2);
  min-height: 3em;
}

.instructor-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: var(--spacing-sm) 0;
}

.instructor-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.instructor-name {
  font-size: var(--font-size-small);
  color: var(--text-color-primary);
  font-weight: 500;
}

.instructor-title {
  font-size: var(--font-size-extra-small);
  color: var(--text-color-secondary);
  margin-left: auto;
}

.course-stats {
  display: flex;
  gap: var(--spacing-md);
  margin: var(--spacing-sm) 0;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-extra-small);
  color: var(--text-color-secondary);
  
  .el-icon {
    font-size: 14px;
  }
}

.course-rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: var(--spacing-sm) 0;
  
  :deep(.el-rate) {
    height: auto;
    
    .el-rate__item {
      font-size: 14px;
    }
    
    .el-rate__text {
      font-size: var(--font-size-extra-small);
      color: var(--text-color-secondary);
    }
  }
}

.rating-count {
  font-size: var(--font-size-extra-small);
  color: var(--text-color-placeholder);
}

.course-level {
  margin: var(--spacing-sm) 0;
}

.course-actions {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-color-extra-light);
  display: flex;
  gap: var(--spacing-sm);
  background: var(--fill-color-extra-light);
}

.action-btn {
  flex: 1;
  font-weight: 500;
}

.preview-btn {
  min-width: 60px;
}

// 响应式设计
@include respond-below(sm) {
  .course-cover {
    height: 160px;
  }
  
  .course-info {
    padding: var(--spacing-md);
  }
  
  .course-title {
    font-size: var(--font-size-base);
  }
  
  .course-stats {
    gap: var(--spacing-sm);
  }
  
  .course-actions {
    padding: var(--spacing-sm) var(--spacing-md);
    flex-direction: column;
    
    .action-btn,
    .preview-btn {
      width: 100%;
    }
  }
}
</style>